<template>
  <div>
    <div class="custom-tree-container">
      <div class="block">
        <p>模块管理</p>
        <el-tree
          :span="12"
          :data="moduleData"
          node-key="module_code"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => addShow(data)">
                添加子节点
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => updateShow(data)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                删除当前节点
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <el-dialog
        :title="editType == 1 ? '模块添加' : '模块修改'"
        :visible.sync="isShowEdit"
      >
        <el-form
          ref="form"
          :model="moduleInfo"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="模块Code"
                :prop="editType == 1 ? 'module_code' : ''"
              >
                <el-input
                  v-model="moduleInfo.module_code"
                  :disabled="editType == 1 ? false : true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="模块名称" prop="module_name">
                <el-input v-model="moduleInfo.module_name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="父模块Code">
                <el-input
                  v-model="moduleInfo.parent_code"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="父模块名称">
                <el-input
                  v-model="moduleInfo.parent_name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="模块级别">
                <el-input
                  v-model="moduleInfo.module_level"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="排序" prop="order_by">
                <el-input v-model.number="moduleInfo.order_by"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否有效">
                <el-switch
                  v-model="moduleInfo.module_status"
                  active-text="是"
                  inactive-text="否"
                  active-value="1"
                  inactive-value="2"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否菜单">
                <el-switch
                  v-model="moduleInfo.is_menu"
                  active-text="是"
                  inactive-text="否"
                  active-value="1"
                  inactive-value="2"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否请求">
                <el-switch
                  v-model="moduleInfo.is_action"
                  active-text="是"
                  inactive-text="否"
                  active-value="1"
                  inactive-value="2"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求url" prop="action_url">
                <el-input v-model="moduleInfo.action_url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

           <el-form-item>
          <el-button
            type="primary"
            @click="editType == 1 ? moduleAdd() : moduleUpdate()"
            >{{ editType == 1 ? "立即创建" : "修改保存" }}</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //验证modelcode是否唯一
    var vModuleCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("模块code不能是空的"));
      }
      this.$axios
        .get("http://localhost:65253/api/BasehInfoManager/VModuleCode", {
          params: { mc: this.moduleInfo.module_code },
        })
        .then((r) => {
          if (r.status == 200 && r.data) {
            callback();
          } else {
            callback(new Error("模块Code已经被使用,请从重新输入模块Code"));
          }
        });
    };
    return {
      cnk: [], //当前选中节点
      moduleData: [],
      moduleInfo: {
        module_code: "",
        module_name: "",

        order_by: -1,
      },
 editType: 1, //编辑类型 1代表添加  2代表修改
      isShowEdit: false,
      rules: {
        module_code: [
          { validator: vModuleCode },
          { required: true, message: "请输入模块Code" },
        ],
        module_name: [{ required: true, message: "请输入模块名称" }],
        order_by: [
          { required: true, message: "排序不能为空" },
          { type: "number", message: "排序必须为数字" },
        ]
      },
    };
  },
  created() {
    this.iniModuleData();
  },

  methods: {
    
    iniModuleData() {
      this.$axios
        .get("http://localhost:65253/api/BasehInfoManager/GetModuleDbViewsAll")
        .then((r) => {
          if (r.status == 200) {
            this.moduleData = r.data;
          }
        });
    },
    updateShow(data) {
      //显示修改当前节点
      this.editType = 2;
      this.isShowEdit = true;
      this.$axios
        .get(`http://localhost:65253/api/BasehInfoManager/GetMViewByCode`,{
           params: { code: data.module_code },
        }
        )
        .then((r) => {
          if (r.status == 200) {
            this.moduleInfo = r.data;
          }
        });
    },
    moduleUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
             " http://localhost:65253/api/BasehInfoManager/ModuleUpdate",
              this.moduleInfo
            )
            .then((r) => {
              if (r.status == 200 && r.data) {
                this.$message("修改成功");
                this.isShowEdit = false;
                this.editType = 1;

                this.iniModuleData();
                this.cnk.push(this.moduleInfo.parent_code);

                // const newChild = {
                //   id: id++,
                //   label: this.moduleInfo.module_name,
                //   module_code: this.moduleInfo.module_code,
                //   module_level: this.moduleInfo.module_level,
                //   children: [],
                // };
                // if (!data.children) {
                //   this.$set(data, "children", []);
                // }
                // data.children.push(newChild);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addShow(data, node) {
      //显示添加子节点    dataa参数代表点击的当前节点的数据
      console.log("data=");
      console.log(data);
      console.log("node");
      console.log(node);
      this.editType = 1;
      this.isShowEdit = true;
      this.moduleInfo = {}; //在显示之前,把添加对象重置
      this.moduleInfo.parent_code = data.module_code;
      this.moduleInfo.parent_name = data.module_name;
      this.moduleInfo.module_level = data.module_level + 1;
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    moduleAdd() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
             "http://localhost:65253/api/BasehInfoManager/ModuleAdd",
              this.moduleInfo
            )
            .then((r) => {
              if (r.status == 200 && r.data) {
                this.$message("添加成功");
                this.isShowEdit = false;
                this.iniModuleData();
                this.cnk.push(this.moduleInfo.parent_code);
                // const newChild = {
                //   id: id++,
                //   label: this.moduleInfo.module_name,
                //   module_code: this.moduleInfo.module_code,
                //   module_level: this.moduleInfo.module_level,
                //   children: [],
                // };
                // if (!data.children) {
                //   this.$set(data, "children", []);
                // }
                // data.children.push(newChild);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>